{% extends "base.njk" %}
{% block main %}

<link rel="stylesheet" type="text/css" href="lib/css/stanpu.css" />
<style>
  .sutanpu {
    padding-top: 70px;
  }
  .sutanpu .item {
    vertical-align: middle;
    height: 200px;
    padding: 16px 8px;
  }
  .sutanpu .item img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
  }
  .sutanpu .item .wow {
  }
</style>
<div class="layui-fluid">
  <div class="layui-row sutanpu">

    {# {% for sutanpu in ui.sutanpu %}
      <div class="item layui-col-xs6 layui-col-sm4 layui-col-md3">
        <img class="" src="{{sutanpu.src}}" alt="">
      </div>
    {% endfor %}

  </div> #}
    {% for sutanpu in ui.sutanpu %}
  				<div class="item layui-col-xs6 layui-col-sm4 layui-col-md3 wow 
          {% if sutanpu.key%4==0 %}bounceInUp{% endif %} {% if sutanpu.key%4==1 %}rollIn{% endif %} 
          {% if sutanpu.key%4==2 %}bounceInDown{% endif %} {% if sutanpu.key%4==3 %}lightSpeedIn{% endif %}">
          {# <div class="item layui-col-xs6 layui-col-sm4 layui-col-md3 wow rollIn"> #}
              <img class="" src="{{sutanpu.src}}" alt="" id="over">
              {# <img class="" src="{{sutanpu.src}}" alt="" id="{{sutanpu.key}}"> #}
					</div>
    {% endfor %}

</div>
<div id="adsbox">&nbsp;</div>
<script src="lib/js/wow.min.js"></script>
<script>
  new WOW().init();
  
</script>
{% endblock %}

